<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="index::heads('注册')"></head>
<style>
    form>label{
        width: 80px;
        text-align: right;
        display: inline-block;
    }
</style>

<body>
<div class="bodymain">
    <div th:replace="index::.layui-header"></div>
    <div th:replace="index::.main-nav"></div>
    <div style="text-align: center">
        <div style="width: 400px; display: inline-block">
            <h1>注册页面</h1>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="headBtn">上传头像</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="headImg" style="max-height: 100px">
                </div>
            </div>
            <form action="reg" method="post" style="line-height: 30px;text-align: left">
                <span th:text="${T(com.example.c94s3plyhyfc.util.Utils).getErrors(errors,null)}"></span><br>

                <label>账号:</label><input name="name" th:value="${param.name}">
                <span th:text="${T(com.example.c94s3plyhyfc.util.Utils).getErrors(errors,'name')}"></span>
                <br>

                <label>密码:</label><input name="pwd" type="password">
                <span th:text="${T(com.example.c94s3plyhyfc.util.Utils).getErrors(errors,'pwd')}"></span>
                <br>

                <label>邮箱:</label><input id="email" name="email" th:value="${param.email}">
                <button @click="sendRegEmail" type="button">发送验证码</button>
                <span th:text="${T(com.example.c94s3plyhyfc.util.Utils).getErrors(errors,'email')}"></span>
                <br>

                <label>电话:</label><input name="phone" th:value="${param.phone}">
                <span th:text="${T(com.example.c94s3plyhyfc.util.Utils).getErrors(errors,'phone')}"></span>
                <br>

                <label>头像:</label><input name="head" th:value="${param.head}" id="headInput">
                <span th:text="${T(com.example.c94s3plyhyfc.util.Utils).getErrors(errors,'head')}"></span>
                <br>

                <label>验证码:</label><input name="inputRegVcode" maxlength="4">
                <br>

                <button style="margin-left: 200px">注册</button>
                <button type="button" onclick="location.href='tologin'">去登录</button>
            </form>
        </div>
    </div>
    <div th:replace="index::.footer"></div>
</div>
<script>
    var v = new Vue({
        el : ".bodymain",
        methods : {
            sendRegEmail(){
                axios.get("sendRegEmail?email=" + email.value).then(res=>{
                    alert(reg.data.msg);
                });
            }
        },
        // 装载事件(首次渲染)
        mounted(){
            //常规使用 - 普通图片上传
            layui.upload.render({
                elem: '#headBtn'
                , url: 'upload' //改成您自己的上传接口
                , field : "head"
                , done: function (res) {
                    //如果上传失败
                    if (res.code == 0) {
                        return layui.layer.msg('上传失败');
                    }
                    // 显示图片
                    headImg.src = res.data;
                    headInput.value = res.data;
                }
            });
        }
    })

</script>
</body>
</html>